<template>
  <div>
    <!-- Main区域输入框和搜索重置按钮 -->
    <i-search ref="iSearch" :model="formData" @search="fetch" @reset="reset">
      <el-form-item label="客户姓名" prop="customerName">
        <el-input v-model="formData.customerName"></el-input>
      </el-form-item>
      <el-form-item label="客户账号" prop="userAccount">
        <el-input v-model="formData.userAccount"></el-input>
      </el-form-item>
      
    </i-search>

    <!-- 表格区域 :toolbar="toolbar"-->
    <i-table
      :tableData="tableData"
      :pageInfo="pageInfo"
      :selectionShow="true"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="(item,index) in columnList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        align="center"
      ></el-table-column>
    </i-table>
    
  </div>
</template>

<script>
// 注意首两个字母要大写，这样才会被识别出来所调用的子组件
import ISearch from "../../components/common/i-search.vue";
import ITable from "../../components/common/i-table.vue";
import req from "@/api/client-manage.js";
export default {
  name: "client-manage",
  data() {
    return {
      // 搜索框数据
      formData: {
        customerName:'',
        userAccount:''
      },
      // 分页数据
      pageInfo: {
        pageIndex: 1,
        pageSize: 5,
        total: 0
      },
      // 表格表头数据
      columnList: [
        { label: "客户账号", prop: "userAccount" },
        { label: "姓名", prop: "customerName" },
        { label: "性别", prop: "customerSex" },
        { label: "手机", prop: "customerPhone" },
        { label: "客户邮箱", prop: "customerEmail" },
        { label: "身份证", prop: "customerId" },
      ],
      // 表格内容数据
      tableData: [ ],
      formRules: {
        goodsName: [
          { required: true, message: "请输入商品名称", trigger: "change" },
          
        ],
        bookNumber: [
          { required: true, message: "请输入书号", trigger: "change" },
        ],
       
      }
    };
  },
  // 挂在完毕之前加载数据
  mounted() {
    this.fetch();
  },
  methods: {
    fetch() {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = 5;
      this.search();
    },
    search() {
      req("getTableData", {
        ...this.formData,
        role:JSON.parse(sessionStorage.getItem('role')).role,
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageIndex
      }).then(data => {
        console.log(data);
        this.pageInfo.total = data.data.total;
        this.pageInfo.pageSize = data.data.pageSize;
        this.pageInfo.pageNum = data.data.pageNum;
        this.tableData = data.data.list;
        console.log(this.tableData);

        // 把返回的性别信息替换成对应性别
        this.tableData.forEach(item => {
          if (item.customerSex === 0) {
            item.customerSex = "男";
          } else if (item.customerSex === 1) {
            item.customerSex = "女";
          }
        });
        
      });
    },
    reset() {
    //  this.reload();
    this.fetch();
    },
    // 每页多少条数据
    handleSizeChange(value) {
      console.log(value);
      this.pageInfo.pageSize = value;
      this.search();
    },
    // 当前页
    handleCurrentChange(value) {
      console.log(value);
      this.pageInfo.pageIndex = value;
      this.search();
    },
    handleSelectionChange(rows) {
      console.log("rows", rows);
    },
  },
  // 子组件注册
  components: {
    ISearch,
    ITable,
  }
};
</script>

<style>
</style>
